fix(native): honour inherits: false on registered custom properties - #412

Problem

@property { inherits: false } stops a custom property at the element that declares it (css-properties-values-api-1 §3). On main the native runtime inherits every custom property, so a descendant resolves a value it must not see.

Every Tailwind v4 shadow-* utility, shadow-none included, composes var(--tw-ring-shadow). So a shadow-none element inside a ring-2 ring-red-500 ancestor paints the ancestor's ring.

The value reaches descendants through every channel:

• a stylesheet rule's variables;
• an inline vars();
• VariableContextProvider;
• :root, which reaches every element;
• the compile-time inliner, which folds a property declared once into every consumer, so a property declared on one class reaches elements without that class: a ring-2 element also paints shadow-sm's shadow.

Two more defects on main:

• An @property rule's initial-value is written to the :root slot, so source order decides between a :root declaration and the property's default.
• The variable registries survive from one jest test to the next.

Solution

• Compiler.
  • The stylesheet carries the non-inheriting names (vn) and each registration's initial value (vi), apart from :root's variables (vr).
  • A registration whose initial value depends on the element (font- or container-relative units, inside calc() and transforms too) is ignored, as browsers do.
  • The inliner leaves a non-inheriting property to the runtime, unless a universal rule declares it, which every element does for itself.
• Runtime.
  • assignInheritedVariables withholds a non-inheriting property on every channel that publishes variables to descendants.
  • varResolver skips :root for one, and reads the registered initial value last, before the var() fallback.
• Reload. inject replaces both halves of every registration. A deleted initial value is retracted through its observable, so a mounted element updates.
• Registries. Both are pinned to globalThis, like the style collection, so a second copy of the module reads the same ones. The jest preset resets them between tests.

Tests

• src/__tests__/compiler/property.test.ts:
  • the vn and vi slots
  • the last registration of a name wins
  • an element-relative initial value is ignored, across the unit families, math functions and transforms
  • the inliner, for a class and for a universal rule
• src/__tests__/native/non-inheriting-variables.test.tsx:
  • each channel: a rule, the provider, :root, and * both inlined and at runtime
  • reload and retraction
  • a second copy of the module
  • the Tailwind ring and shadow composition
• src/__tests__/native/vars.test.tsx: an inline vars().
• src/__tests__/native/variable-cycles.test.tsx: a cycle through :root.
• Every expectation is what Chromium 153, Firefox 155 and WebKit 26.6 compute for the same CSS. For a container-relative initial value, Chromium and WebKit ignore the rule and Firefox keeps it; this follows the two.
• On main, 59 of the 113 cases in these files fail. Each of 29 mutations fails its own cases.

Verification

On this head, every ci.yml job but the iOS build passes on Ubuntu with Node 22.18: build · lint · typecheck · yarn test 1431 passed · node --test · the web export · no unstaged files · commitlint. On Windows with Node 26, yarn typecheck, yarn lint and yarn test pass too.

The iOS dev build, run with Xcode 27.1 where CI pins 26.6, fails on main as on this head, before any JavaScript is bundled: Expo's ExpoModulesJSI does not build with it (cannot find type '__ObjC::expo' in scope).

No issue here or in nativewind/nativewind tracks this; I searched both for inherits, @property and ring.

Device evidence, before and after: #412 (comment)

Known limits

• An @property rule lightningcss rejects aborts the whole compile, where a browser ignores just that rule: an initial value that does not match the syntax, or a missing inherits. fix(compiler): recover from a rule lightningcss cannot parse #493 recovers from it.
• lightningcss accepts calc(1 + 1px) as a <length> and simplifies calc(3px * sign(1em)) to 3px before the compiler sees either, so each registers here where Chromium and Firefox ignore the rule.
• An @property nested in @media registers in browsers while the query matches. lightningcss parses it as an unknown rule, so it is not registered here.
• The inliner still folds an inheriting property declared once on a class, or under a @media query, into every consumer. fix(compiler): scope single-definition variable inlining to the declaring block #413 scopes it to the declaring block.

Merge order

This overlaps #388, #391, #392, #411, #413, #415, #423, #426, #431, #434, #436, #443, #467, #469, #484, #485, #486, #494, #496, #498, #501 and #503; I'll re-cut whichever lands after the others.